<template>
  <div class="search_box">
    <title-com />

    <div class="input_box">
      <!-- <input
        class="ph_10 input"
        v-model="searchVal"
        type="text"
        @keydown.enter="searchBooks()"
      /> -->
      <div class="search_input input" contenteditable="true" @keydown.enter="searchBooks(true)" ref="search_box"></div>
      <i class="el-icon-search" @click="searchBooks(true)"></i>
      
      <div class="search_zh" @click="searchBooks(false)">ᠬᠢᠲᠠᠳ ᠨᠣᠮ</div>
    </div>

    <div class="change_list">
      <div class="list_item" :class="{ on: activeListIndex == '1' }" @click="clickItem('1')">ᠪᠥᠭᠥᠳᠡ</div>
      <div class="list_item" :class="{ on: activeListIndex == '2' }" @click="clickItem('2')">ᠨᠣᠮ᠎ᠤᠨ ᠳ᠋ᠤᠭᠠᠷ</div>
      <div class="list_item" :class="{ on: activeListIndex == '3' }" @click="clickItem('3')"> ᠵᠣᠬᠢᠶᠠᠭᠴᠢ </div>
      <div class="list_item" :class="{ on: activeListIndex == '4' }" @click="clickItem('4')"> ᠬᠡᠪᠯᠡᠯ᠎ᠦᠨ ᠬᠣᠷᠢᠶ᠎ᠠ </div>
    </div>
  </div>
</template>

<script>
import TitleCom from "./title.vue";

export default {
  name: "Search",
  components: { TitleCom },
  data() {
    return {
      def_text: "搜索全部类别",
      searchVal: "",
      activeListIndex: 1,
    };
  },
  computed: {
    getStateSearchVal() {
      this.searchVal = this.$store.state.searchVal
    },

    getStateActiveIndex() {
      this.activeListIndex = this.$store.state.activeIndex
    },
  },
  created() {
    this.getStateSearchVal
    this.getStateActiveIndex
  },
  mounted() {
    this.$refs.search_box.innerHTML = this.searchVal
  },
  methods: {
    searchBooks(val) {
      this.$store.commit('changeStyle', val)
      this.searchVal = this.$refs.search_box.innerText
      this.$store.commit('changeSearchVal', this.$refs.search_box.innerText)

      let query = {};
      query.isMon = val

      if (this.activeListIndex === "1") {
        query.search = this.searchVal
        this.$route.query.search = this.searchVal
      }
      if (this.activeListIndex === "2") {
        query.isbn = this.searchVal
        this.$route.query.isbn = this.searchVal
      } else if (this.activeListIndex === "3") {
        query.authors = this.searchVal
        this.$route.query.authors = this.searchVal
      } else if (this.activeListIndex === "4") {
        query.publisher = this.searchVal
        this.$route.query.publisher = this.searchVal
      }
      this.$route.query.isMon = val

      if (this.$route.path !== "/book-list-mn") {
        this.$router.push({
          path: "/book-list-mn",
          query,
        });
      } else {
        query.isMon = val
        this.$emit('getBookList', query)
        this.$store.commit('changeActiveIndex', this.activeListIndex)
      }
    },

    // 点击切换栏
    clickItem(index) {
      this.activeListIndex = index;
      this.$store.commit('changeActiveIndex', this.activeListIndex)
    },
  },
};
</script>

<style lang="less" scoped>
  [contenteditable]{
    outline: 1px solid transparent; 
    font-family: "gltTig";
  }
  [contenteditable]:focus{
    border: 1px solid #74a5ff !important; 
    caret-color: #74a5ff;
    padding: 5px;
    line-height: 28px;
  }
.on { 
  color: #000 !important;
  font-size: 24px;
  border-right: 4px solid #74a5ff;
}
.search_box {
  width: 230px;
  height: 620px;
  padding: 10px;
  // border: 1px solid #ccc;
  position: relative;

  .input_box {
    width: 40px;
    height: 720px;
    position: absolute;
    top: 10px;
    left: 100px;
    margin-left: 20px;
    // border: 1px solid #999;

    .search_input {
      width: 40px;
      height: 600px;
      padding-top: 5px;
      writing-mode: vertical-lr;
      border: 1px solid #ccc;
      border-radius: 5px;
      font-size: 24px;
      position: relative;
      font-family: "gltTig" !important;
    }

    .el-icon-search {
      position: relative;
      top: -35px !important;
      left: 12px !important;
      color: #74a5ff;
      font-weight: 800 !important;
      text-align: center;
    }
    .el-icon-search:hover { cursor: pointer; }

    .search_zh {
      width: 38px;
      height: 80px;
      writing-mode: vertical-lr;
      background-color: #74a5ff;
      color: #fff;
      font-size: 20px;
      font-family: "gltTig" !important;
      text-align: center;
      line-height: 40px;
      position: absolute;
      left: 2px;
      bottom: 30px;
      border-radius: 5px;
    }
    &:hover { cursor: pointer; }
  }

  .change_list {
    width: 50px;
    height: 600px;
    // border: 1px solid #74a5ff;
    position: absolute;
    top: 0;
    left: 220px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;

    .list_item {
      width: 60px;
      height: 110px;
      writing-mode: vertical-lr;
      font-size: 20px;
      color: #ccc;
      font-weight: 600;
      padding: 10px 15px;
      text-align: center;
      font-family: "gltTig";
    }
    &:hover {
      cursor: pointer;
    }
  }
}

@media screen and (min-width: 1800px) {
  .search_box { width: 230px !important; }
  i { left: -18px !important; }
  .change_list {left: 170px !important; }
} 

@media screen and (min-width: 1600px) and (max-width: 1800px) {
  .search_box { width: 210px !important; }
  .input_box { margin-left: 0px !important; }
  i { left: -18px !important; }
  .change_list {left: 140px !important; }
} 

@media screen and (min-width: 1400px) and (max-width: 1599px) {
  .search_box { width: 190px; }
  .input_box { margin-left: 10px !important; }
  i { left: -19px !important; }
  .change_list {left: 160px !important; }
} 

@media screen and (min-width: 1200px) and (max-width: 1399px) {
  .search_box { width: 150px; }
  i { left: -28px !important; }
  .input_box { margin-left: 0px !important; }
  .change_list {left: 150px !important; }
} 

@media screen and (min-width: 1000px) and (max-width: 1199px) {
  .search_box { width: 120px; }
  .input_box { margin-left: -10px !important; }
  i { left: -58px !important; }
  .change_list {left: 135px !important; }
} 

@media screen and (min-width: 992px) and (max-width: 999px) {
  .search_box { width: 130px; }
  .input_box { margin-left: -20px !important; }
  i { left: -68px !important; }
  .change_list {left: 120px !important; }
  .search_zh { margin-left: -2px !important; }
} 
</style>